<!--suppress ALL -->
<template>
  <div class="sort">
    <ul>
      <li v-for="(item,index) in filterData"
          :key="index"
          class="new-sort-integrative"
          @click="filterDisplayChange(item)">
        <span>{{item.name}}</span>
        <div class="wrapper"
             v-show="!item.isUp">
          <div class="items"
               v-for="(subitem,indexs) in item.list"
               :key="indexs"
               :class="{on: subitem.status}"
               @click="filterChange(subitem, item)">
            <div class="litem">{{ subitem.title }}</div>
            <div class="ritem"><i v-show="subitem.status"
                 class="check-icon"></i></div>
          </div>
        </div>
      </li>
      <li v-for="(item,index) in data"
          :key="index"
          :class="[{'new-sort-integrative': item.type===1 }, {'new-sort-price': item.type===3 }, {'active': item.status}]"
          @click="sort(item)">
        <span v-if="item.type === 1">
          {{item.name}}
        </span>
        <div class="wrapper"
             v-show="item.type === 1 && !item.isUp">
          <div class="items"
               v-for="(subitem,indexs) in item.list"
               :key="indexs"
               :class="{on: subitem.status}"
               @click="sortSubOneWay(subitem, item)">
            <div class="litem">{{ subitem.title }}</div>
            <div class="ritem"><i v-show="subitem.status"
                 class="check-icon"></i></div>
          </div>
        </div>

        <span v-if="item.type === 2">
          {{item.name}}
        </span>
        <span v-if="item.type === 3"
              :class="[item.status ? (item.isUp ? 'arrow-down' : 'arrow-up') : '']">
          {{item.name}}
        </span>

      </li>
      <li class="new-sort-choose"
          @click="filter"
          v-if="enableFilter">
        <span>筛选</span>
      </li>
      <li v-if="enableSwitch">
        <i :class="[display ? 'sort-icon' : 'sort-card-icon']"
           @click="switchChange"></i>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array
    },
    filterData: {
      type: Array
    },
    // 显示方式，true列表，false网格
    display: {
      type: Boolean
    },
    // 是否开启切换显示
    enableSwitch: {
      type: Boolean
    },
    // 是否启用筛选
    enableFilter: {
      type: Boolean
    }
  },
  data () {
    return {
    }
  },
  methods: {
    filterDisplayChange (item) {
      item.isUp = !item.isUp
      this.filterData.map(i => {
        if (item !== i) {
          i.isUp = true
        }
      })
    },
    filterChange (item, parent) {
      if (!item.status) {
        let name = parent.name
        parent.list.map(i => {
          if (i === item) {
            i.status = true
            name = i.title
          } else {
            i.status = false
          }
        })

        if (item != null) {
          parent.status = true
          parent.name = name
          parent.isUp = false
          item.status = true
          this.$emit('filterChange', parent)
        }
      } else {
        parent.isUp = true
      }
    },
    // 主排序项切换
    sort (item) {
      // 同元素再次点击
      if (item.type === 1) {
        // 综合重复点击，显示或隐藏二级菜单
        item.isUp = !item.isUp
      }

      if (item.type === 2) {
        if (item.status) {
          // 销量重复点击，固定降序
          item.isUp = false
        } else {
          this.clear()
          item.isUp = false
          item.status = true
          this.sortOneWay(item)
        }
      }

      if (item.type === 3) {
        if (item.status) {
          // 价格重复点击，切换升序降序
          item.isUp = !item.isUp
          this.sortTwoWay(item)
        } else {
          this.clear()
          item.isUp = true
          item.status = true
          this.sortTwoWay(item)
        }
      }
    },
    // 子项单向排序
    sortSubOneWay: function (item, parent) {
      if (!item.status) {
        this.clear()
        let name = parent.name
        parent.list.map(i => {
          if (i === item) {
            i.status = true
            name = i.title
          } else {
            i.status = false
          }
        })

        if (item != null) {
          parent.status = true
          parent.name = name
          parent.isUp = false
          item.status = true
          this.$emit('sortChange', item)
        }
      } else {
        parent.isUp = true
      }
    },
    // 主项双向排序
    sortTwoWay: function (parent) {
      let sord = parent.isUp ? 'asc' : 'desc'
      let item = parent.list.find(function (value, index, arr) {
        return value.sord === sord
      })
      if (item != null) {
        item.status = true
        this.$emit('sortChange', item)
      }
    },
    // 主项单向排序
    sortOneWay (parent) {
      let sord = parent.isUp ? 'asc' : 'desc'
      let item = parent.list.find(function (value, index, arr) {
        return value.sord === sord
      })

      if (item != null) {
        item.status = true
        this.$emit('sortChange', item)
      }
    },
    // 清除排序
    clear () {
      this.data.map(i => {
        i.status = false
        i.isUp = true
        i.list.map(k => {
          k.status = false
        })
      })
    },
    // 筛选
    filter () {
      this.data.map(i => {
        if (i.type === 1) {
          i.isUp = true
        }
      })
      this.$emit('filter')
    },
    // 显示切换
    switchChange () {
      this.$emit('switchChange')
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/css/pub";

.sort {
  display: flex;
  align-items: center;
  width: 100vw;
  height: $default_toolbar_height;
  line-height: $default_toolbar_height;
  padding: 0 .25rem;
  background-color: #fff;
  border-bottom: .0125rem solid $default_border_color;
  ul {
    flex: 1;
    display: flex;
    justify-content: space-around;
    li {
      border-right: 0;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      display: inline-block;
      font-size: $default_font_size;
      text-align: center;
      span {
        color: $default_title_color;
        display: block;
      }

      span:after {
        display: inline-block;
        background-size: 5rem 5rem;
        background-repeat: no-repeat;
        background-image: url("http://img.zanjl.com/Content/img/image/axc-sprites.png");
      }
      &.active {
        span {
          color: $default_red_color;
        }
        span:after {
          display: inline-block;
          background-size: 5rem 5rem;
          background-repeat: no-repeat;
          background-image: url("http://img.zanjl.com/Content/img/image/axc-sprites.png");
        }
      }
    }

    .new-sort-integrative {
      span:after {
        content: "";
        display: inline-block;
        width: .4rem;
        height: .35rem;
        background-position: -4.51rem -.6rem;
        margin-left: .1rem;
      }
      &.active {
        span:after {
          content: "";
          display: inline-block;
          width: .4rem;
          height: .35rem;
          background-position: -4.51rem .12rem;
          margin-left: .1rem;
        }
      }
    }

    .new-sort-price {
      span:after {
        content: "";
        display: inline-block;
        width: .2rem;
        height: .25rem;
        background-position: -4.25rem -.75rem;
        margin-left: .1rem;
      }

      span.arrow-down:after {
        content: "";
        display: inline-block;
        width: .2rem;
        height: .25rem;
        background-position: -4.25rem -.375rem;
        margin-left: .1rem;
      }

      span.arrow-up:after {
        content: "";
        display: inline-block;
        width: .2rem;
        height: .25rem;
        background-position: -4.25rem 0;
        margin-left: .1rem;
      }
    }

    .new-sort-choose {
      span:after {
        content: "";
        background-image: url(http://img.zanjl.com/Content/img/image/axc-search-sprites.png);
        background-repeat: no-repeat;
        background-size: 5rem 5rem;
        background-position: -4.45rem .075rem;
        width: .375rem;
        height: .325rem;
        display: inline-block;
        margin-left: .1rem;
      }
    }
  }
  .wrapper {
    width: 100vw;
    position: fixed;
    left: 0;
    margin-top: .0125rem;
    z-index: 999;
    background-color: #fff;
    text-align: left;
    .items {
      color: $default_title_color;
      padding: 0 .5rem;
      height: $default_cell_height;
      line-height: $default_cell_height;
      vertical-align: middle;
      border-bottom: .0125rem solid #eee; /*no*/

      .litem {
        margin: 0;
        width: 50%;
        float: left;
        text-align: left;
      }

      .ritem {
        margin: 0;
        width: 50%;
        float: right;
        text-align: right;
      }
      &.on {
        color: $default_red_color;
      }
    }
  }
}
</style>
